<template>
  <div  class="page-layout">
    <h1>DvChartRadar</h1>
    <p>圆环图表</p>

    <h2>DvChartRadar Settings</h2>
    <pre> 
      下面为 DvChartRadar 的 settings 配置： 
      {
        // 指示设置
        indicator: {
          type: [Array, Number],
          default() {
            return 100
          }
        },
        // 构造序列数据项辅助函数
        dataHelper: [Object, Function],
 
        circle: Boolean,
      }     
    </pre>

    <h2>example1 基本使用</h2>
    <textarea readonly style="width: 800px; height: 100px">
      <dv-chart-radar :data="data1" fit :settings="{shadow: false}"  ></dv-chart-radar>
      const data1 = ref({
        columns: ['指标名称', '销售', '管理', '客服', '研发', '市场'],
        rows: [ ['预算分配', 20, 50, 80, 29, 55, 60], ['实际开销', 30, 60, 30, 79, 45, 80] ]
      }) 
    </textarea>
     
    <div class="demo-box" style="width: 800px; height: 400px; border: 1px solid;"  >
      <dv-chart-radar :data="data1" fit ></dv-chart-radar>
    </div>
    <br/>
    
    <h2>结合 dv-page使用</h2>  
    <h3>
      基本样式
    </h3>
     
    <div style="width: 1000px;  ">
      <demo-warp>
        <dv-page target="parent" fit> 
          <dv-box x-align="center" y-align="middle" width="80%" height="80%"  >
            <dv-chart-radar :data="data1" fit    ></dv-chart-radar>
          </dv-box>
        </dv-page>
      </demo-warp>
    </div> 
    <br/>
 
    <h3>
      settings.circle 圆形雷达
    </h3>
    <textarea readonly style="width: 800px; height: 50px">
      <dv-chart-radar :data="data1" fit :settings="{circle: true }"   ></dv-chart-radar>
    </textarea>  
    <div style="width: 1000px;  ">
      <demo-warp>
        <dv-page target="parent" fit> 
          <dv-box x-align="center" y-align="middle" width="80%" height="80%"  >
            <dv-chart-radar :data="data1" fit :settings="{circle: true}"   ></dv-chart-radar>
          </dv-box>
        </dv-page>
      </demo-warp>
    </div> 
    <br/>

    <h3>
      settings.indicator 控制雷达最大范围
    </h3>
    <textarea readonly style="width: 800px; height: 150px">
      <dv-chart-radar :data="data1" fit :settings="{indicator: 150}"   ></dv-chart-radar>
      const data1 = ref({
        columns: ['指标名称', '销售', '管理', '客服', '研发', '市场'],
        rows: [
          ['预算分配', 20, 50, 80, 29, 55, 60],
          ['实际开销', 30, 60, 30, 79, 45, 80]
        ]
      })
    </textarea>  
    <div style="width: 1000px;  ">
      <demo-warp>
        <dv-page target="parent" fit> 
          <dv-box x-align="center" y-align="middle" width="80%" height="80%"  >
            <dv-chart-radar :data="data1" fit :settings="{indicator: 150}"  debug ></dv-chart-radar>
          </dv-box>
        </dv-page>
      </demo-warp>
    </div> 
    <br/>

    <h3>
      settings.dataHelper : 使用数据自定义函数 优化图表
    </h3>
    <textarea readonly style="width: 800px; height: 250px">
      <dv-chart-radar :data="data1" fit :settings="{dataHelper: dataHelper}"   ></dv-chart-radar>
      const dataHelper = (row) => { 
        if (row[0] === '实际开销') {
          return {
            symbol: 'rect',
            symbolSize: 12,
            lineStyle: {
              type: 'dashed'
            },
            label: {
              show: true,
              formatter: function (params) {
                return params.value;
              }
            }
          }
        } else {
          return {}
        } 
      } 
    </textarea>  
    <div style="width: 1000px;  ">
      <demo-warp>
        <dv-page target="parent" fit> 
          <dv-box x-align="center" y-align="middle" width="80%" height="80%"  >
            <dv-chart-radar :data="data1" fit :settings="{dataHelper: dataHelper}" ></dv-chart-radar>
          </dv-box>
        </dv-page>
      </demo-warp>
    </div> 
    <br/>

    
    <br/><br/>
    <h2>更多个性化配置</h2>
    <p>参考 图表组件 extend配置的用法， <router-link to="/example/extend-use">extend 配置使用</router-link></p>
    <br/><br/>
  </div>

</template>
<script setup lang="ts" >
import {DvPage, DvBox, DvChartRadar} from '$comp/index';
import {ref} from 'vue' 
const data1 = ref({
  columns: ['指标名称', '销售', '管理', '客服', '研发', '市场'],
  rows: [
    ['预算分配', 20, 50, 80, 29, 55, 60],
    ['实际开销', 30, 60, 30, 79, 45, 80]
  ]
}) 

const dataHelper = (row) => {
  // console.log(row, 'row')
  if (row[0] === '实际开销') {
    return {
      symbol: 'rect',
      symbolSize: 12,
      lineStyle: {
        type: 'dashed'
      },
      label: {
        show: true,
        formatter: function (params) {
          return params.value;
        }
      }
    }
  } else {
    return {}
  }
  // return row
}


 
// import demoWarp from '@/components/demo-warp.vue';
</script>
<style lang="scss" scoped>
 .page-layout{
  height: 100%;
  
 }
</style>